@import "lib/mixin";

$numpad-height:                     44px !default;

.numpad {
    display: block;
    position: relative;
    width: 100%;
    height: $numpad-height * 4;

    .numbers, .actions {
        display: block;
        text-align: center;

        .item {
            flex: 1;
            position: relative;
            user-select: none;
            line-height: $numpad-height;
            min-height: $numpad-height;
            height: $numpad-height;
            display: inline-block;

            &[val="ok"] {
                height: $numpad-height * 2;
                min-height: $numpad-height * 2;
                line-height: $numpad-height * 2;
            }

            @include retina-border(all, $border-default-color, true);
            @include retina-border-width(top, 0, true);
            @include retina-border-width(left, 0, true);

            &.active {
                background-color: $border-default-color;
            }

            &.disabled {
                opacity: 1;
                background-color: #f5f5f5;
            }
        }
    }

    .numbers {
        width: 75%;
        overflow: hidden;

        .item {
            min-width: 33.33333%;
            float: left;
        }
    }

    .actions {
        width: 25%;
        position: absolute;
        top: 0;
        right: 0;

        .item {
            display: block;
        }
    }
}